<template>
	<view>
		<view class="total">
			<text space="ensp">{{orders | count_hj}}</text>
			<text space="ensp" style="color:red;">{{orders | count_ws}}</text>
		</view>
		<view class="filter">			
			<input placeholder="请输入客户名称" v-model="keywords"/>
			<radio-group @change="radioChange" class="radiogroup">
				<block v-if="day=='today'">
					<label style="width: 25%;font-size: 12px;">
						<radio value="1" :checked="order_status==1" color="#1296db" style="transform:scale(0.7);"/>全部
					</label>
					<label style="width: 25%;font-size: 12px;">
						<radio value="2" :checked="order_status==2" color="#1296db" style="transform:scale(0.7);"/>未配送
					</label>
					<label style="width: 25%;font-size: 12px;">
						<radio value="3" :checked="order_status==3" color="#1296db" style="transform:scale(0.7);"/>已送达
					</label>
					<label style="width: 25%;font-size: 12px;">
						<radio value="4" :checked="order_status==4" color="#1296db" style="transform:scale(0.7);"/>未下单
					</label>
				</block>
				<block v-else>
					<label style="width: 20%;font-size: 12px;">
						<radio value="1" :checked="order_status==1" color="#1296db" style="transform:scale(0.7);"/>全部
					</label>
					<label style="width: 20%;font-size: 12px;">
						<radio value="2" :checked="order_status==2" color="#1296db" style="transform:scale(0.7);"/>未送达
					</label>
					<label style="width: 20%;font-size: 12px;">
						<radio value="3" :checked="order_status==3" color="#1296db" style="transform:scale(0.7);"/>已送达
					</label>
				</block>
			</radio-group>
		</view>
		<view class="order-box">
			<view class="order-item">
				<view class="order-td td1" style="font-weight: bold;">客户</view>
				<view class="order-td td2" style="font-weight: bold;">距离</view>
				<view class="order-td td3" style="font-weight: bold;">商品</view>
				<view class="order-td td4" style="font-weight: bold;">状态</view>
			</view>
			<block v-for="(items, indexs) in orders" :key="indexs">	
				<block v-if="!keywords || (keywords && items && items.position.title.indexOf(keywords)!=-1)">
					<block v-for="(item, index) in items.list" :key="index">
					<view @click="goDetail(item)" class="order-item" v-if="order_status==1 || (order_status==2 && !item.receive_time) || (order_status==3 && item.receive_time)">			
						<view class="order-td td1" style="height: 70rpx;">
							<text v-if="item.customer.customer_type=='company'">{{item.customer.name}}</text>
							<text v-if="item.customer.customer_type=='family'">{{item.customer.address}}</text>
						</view>
						<view class="order-td td2" style="height: 70rpx;">{{items.distance | parseDistance}}</view>
						<view class="order-td td3" style="height: 70rpx;">{{item.goods.name}}-{{item.number-item.refuse_number}}{{item.spec.unit}}</view>
						<view class="order-td td4" style="height: 70rpx;">
							<text v-if="item.receive_time" style="color: green;font-weight: bold;">已送达</text>
							<block v-else>
								<text v-if="item.is_pay" style="color: red;font-weight: bold;">
									未配送
								</text>
								<text v-else style="color: red;font-weight: bold;">
									未支付
								</text>
							</block>
						</view>				
					</view>
					</block>
					<block v-if="items.type=='weixiadan'">
						<view @click="goDetail(items)" class="order-item" v-if="order_status==1 || order_status==4">
							<view class="order-td td1" style="height: 70rpx;">
								<text v-if="items.customer.customer_type=='company'">{{items.customer.name}}</text>
								<text v-if="items.customer.customer_type=='family'">{{items.customer.address}}</text>
							</view>
							<view class="order-td td2" style="height: 70rpx;">{{items.distance | parseDistance}}</view>
							<view class="order-td td3" style="height: 70rpx;"></view>
							<view class="order-td td4" style="height: 70rpx;">
								<text :style="'color: '+parseColor(items.delivery_day)+';'">{{items.delivery_day | parseDeliveryTime}}</text>
							</view>				
						</view>	
					</block>
				</block>
			</block>
		</view>
		<u-popup v-if="showDetail" :show="showDetail" @close="showDetail=false" mode="center" :round="4" customStyle="width:90%;padding:30rpx 0;">
			<view class="orderDetail">
				<block v-if="detail.order_no">
					<view class="line">
						<text class="title">订单号：</text>
						<text>{{detail.order_no}}</text>
					</view>	
					<view class="line">
						<text class="title">商品：</text>
						<text>{{detail.goods.name}}-{{detail.number}}{{detail.spec.unit}}</text>
					</view>	
					<view class="line">
						<text class="title">规格：</text>
						<text>{{detail.spec.name}}</text>
					</view>	
					<view class="line">
						<text class="title">金额：</text>
						<text>￥{{detail.total_money}}</text>
					</view>	
					<view class="line" v-if="detail.remark">
						<text class="title">备注：</text>
						<text>{{detail.remark}}</text>
					</view>	
				</block>
				<view class="line">
					<text class="title">客户：</text>
					<text v-if="detail.customer.customer_type=='company'">{{detail.customer.name}}</text>
					<text v-if="detail.customer.customer_type=='family'">{{detail.customer.address}}</text>
				</view>
				<block v-if="detail.address">
				<view class="line">
					<text class="title">地址：</text>
					<view  style="display: flex;align-items: center;" @click="local(detail.address.latitude,detail.address.longitude)">
						<text style="text-decoration: underline;">{{detail.address.mergename}},{{detail.address.detail}}</text>
						<u-icon name="map-fill" color="#626262"></u-icon>
					</view>	
				</view>
				<view class="line">
					<text class="title">联系人：</text>
					<text @click="call(detail.address.mobile)" style="text-decoration: underline;">{{detail.address.contact}} - {{detail.address.mobile}}</text>
				</view>	
				</block>
				<block v-else>
				<view class="line">
					<text class="title">地址：</text>
					<view  style="display: flex;align-items: center;" @click="local(detail.customer.latitude,detail.customer.longitude)">
						<text style="text-decoration: underline;">{{detail.customer.address}}</text>
						<u-icon name="map-fill" color="#626262"></u-icon>
					</view>	
				</view>
				<view class="line">
					<text class="title">联系人：</text>
					<text @click="call(detail.customer.mobile)" style="text-decoration: underline;">{{detail.customer.contact}} - {{detail.customer.mobile}}</text>
				</view>		
				</block>
				<view class="line" style="border-bottom: 0;padding-bottom: 0;margin-bottom: 0rpx;">
					<block v-if="detail.order_no && !detail.receive_time">
					<u-button type="success" size="small" v-if="!detail.is_pay" @click="pay()" customStyle="margin-bottom:20rpx" >确认付款</u-button>
					<u-button type="success" size="small" v-if="detail.is_pay" @click="receive()" customStyle="margin-bottom:20rpx" >确认送达</u-button>
					<u-button type="error" size="small" customStyle="margin-bottom:20rpx" @click="refuse(1)">退还商品</u-button>
					</block>
					<u-button type="primary" size="small" @click="downBill(detail.customer.id)" customStyle="margin-bottom:20rpx" >代客下单</u-button>
				</view>
			</view>
		</u-popup>	
		<u-popup v-if="showRefuse" :show="showRefuse" @close="showRefuse=false" mode="center" :round="4" customStyle="width:90%;padding:30rpx 0;">
			<view class="orderDetail">
				<view class="line">
					<text class="title">退还数量：</text>
					<u-input v-model="refuseform.refuse_number" inputAlign="right" type="number">
						<template slot="suffix">
							<text class="tag-info" style="margin-right: 0;">{{detail.spec.unit}}</text>
						</template>
					</u-input>
				</view>	
				<view class="line">
					<text class="title">退还原因：</text>
					<u--textarea v-model="refuseform.refuse_remark" placeholder="请输入退还原因" ></u--textarea>			
				</view>
				<view class="line" style="border-bottom: 0;padding-bottom: 0;margin-bottom: 0rpx;">
					<u-button type="error" size="small" @click="refuse(2)">确认退还</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {methods} from '@/utils/methods.js';
	export default {
		props: {
			orders:{
				type:Array,
				default:[]
			},
			day:{
				type:String,
				default:'today'
			},
			init_status:{
				type:Number,
				default:2
			}
		},
		filters:{
			parseDistance:function(data){
				if(data<1000){
					return data+'m';
				}
				if(data>=1000){
					return parseFloat(data/1000).toFixed(2)+'km';
				}
			},
			parseDeliveryTime:function(data){
				if(!data){
					return '从未下单';
				}
				let time1=parseInt(new Date().getTime()/1000);
				let time2=parseInt(new Date(data).getTime()/1000);
				let day=time1-time2;
				if(day<0){
					return '明天有订单';
				}
				day=parseInt(day/24/3600);
				if(day===0){
					return '昨天有订单';
				}
				if(day<30){
					return day+'天前有订单';
				}
				if(day>=30){
					return parseInt(day/30)+'月前有订单';
				}
			},
			count_hj:function(res){
				let all_order=0;
				res.forEach(t=>{
					if(!t.list){
						return;
					}
					all_order+=t.list.length;
				});
				return '合计：'+all_order+'笔订单';
			},
			count_ws:function(res){
				let all_order_fail=0;
				res.forEach(t=>{
					if(!t.list){
						return;
					}
					t.list.forEach(f=>{
						if(!f.receive_time){
							all_order_fail+=1;
						}
					});
				});
				return '  未送：'+all_order_fail+'笔订单';
			}
		},
		data() {
			return {
				towel:'',
				keywords:'',
				order_status:'',
				showDetail:false,
				detail:'',
				showRefuse:false,
				refuseform:{
					refuse_number:'',
					refuse_remark:''
				},
				billform:{
					channel_id:'',
					customer_id:'',
					name:'',
					settle_type:'',
					delivery_day:'1',
					goods:[],
					goods_index:0,
					number:1
				}
			}
		},
		created(e) {
			this.order_status=this.init_status;	
		},
		methods: {
			...methods,
			changeGoods:function(e){
				this.billform.goods_index=parseInt(e.detail.value);
			},
			downBill:function(customer_id){
				this.$navigateTo('driver/createOrder?customer_id='+customer_id);
			},
			parseColor:function(data){
				if(!data){
					return 'darkgray';
				}
				let time1=parseInt(new Date().getTime()/1000);
				let time2=parseInt(new Date(data).getTime()/1000);
				let day=time1-time2;
				if(day<0){
					return 'green';
				}
				day=parseInt(day/24/3600);
				if(day<1){
					return 'green';
				}
				if(day>=1 && day<5){
					return 'red';
				}
				if(day>=5 && day<10){
					return '#d2b138';
				}
				return 'darkgray';
			},
			call:function(phone){
				uni.makePhoneCall({
					phoneNumber:phone
				});
			},
			local:function(latitude,longitude){
				uni.openLocation({
					latitude:parseFloat(latitude),
					longitude:parseFloat(longitude)
				});
			},
			goDetail:function(item){
				console.log(item);
				this.detail=item;
				this.showDetail=true;
			},
			refuse:function(step){
				if(step==1){
					this.showDetail=false;
					this.showRefuse=true;
				}
				if(step==2){
					if(!this.refuseform.refuse_number){
						uni.showToast({
							title:'退还数量不能为空',
							icon:'none'
						});
						return;
					}
					if(this.refuseform.refuse_number<=0){
						uni.showToast({
							title:'退还数量不能小于1',
							icon:'none'
						});
						return;
					}
					if(this.refuseform.refuse_remark.trim()==''){
						uni.showToast({
							title:'退还原因必须填写',
							icon:'none'
						});
						return;
					}
					this.$post('driver/refuse',{...this.refuseform,id:this.detail.id},true).then(res=>{
						this.$emit('updateList');
						this.showRefuse=false;
					});
				}
			},
			receive:function(){
				let number=this.detail.number-this.detail.refuse_number;
				this.showDetail=false;
				uni.showModal({
					content:'您确认【'+number+this.detail.spec.unit+'-'+this.detail.goods.name+'】已经送达到客户吗？',
					success: (res) => {
						if(res.confirm){
							this.$post('driver/receive',{id:this.detail.id},true).then(res=>{
								this.detail.receive_time=1;
								this.$emit('updateList');	
							});
						}else{
							this.showDetail=true;
						}
					},
				});
			},
			pay:function(){
				let total_money=this.detail.total_money;
				this.showDetail=false;
				uni.showModal({
					content:'您确认已经收到客户支付的【￥'+total_money+'】货款吗？',
					success: (res) => {
						if(res.confirm){
							this.$post('driver/pay',{id:this.detail.id},true).then(res=>{
								this.detail.is_pay=1;
								this.showDetail=true;
							});
						}else{
							this.showDetail=true;
						}
					},
				});
			},
			radioChange:function(e){
				this.order_status=parseInt(e.detail.value);
			}
		}
	}
</script>

<style scoped lang="scss">
	.total{
		background-color: #a2f1e8;
		font-size: 12px;
		font-weight: bold;
		padding: 20rpx 10rpx;
	}
	.filter{
		margin-top: 10rpx;
		background-color: #a2f1e8;
		padding: 10rpx 10rpx;
		.radiogroup{
			width: 100%;
			display: flex;
			margin-top: 20rpx;
		}	
		input{
			background-color: #fff;
			padding:6rpx 30rpx;
			width: 90%;
			font-size: 12px;
			margin:0 auto;		
		}	
	}
	.order-box{
		background-color: #a2f1e8;
		margin-top: 10rpx;
		padding: 20rpx 10rpx;
		.order-item{
			background-color: #fff;	
			display: flex;	
			margin-bottom: 10rpx;	
			padding:10rpx 0;
			.order-td{
				font-size: 12px;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;				
			}	
			.td1{
				width: 30%;
				padding: 0 10rpx;	
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.td2{
				width: 20%;
			}
			.td3{
				width: 30%;
			}
			.td4{
				padding: 0 10rpx;
				width: 20%;
			}
		}
		.order-item:last-child{
			margin-bottom: 0rpx;	
		}
	}
	.orderDetail{
		padding: 20rpx;
		padding-bottom: 0;
		font-size: 28rpx;
		.line{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			margin-bottom: 20rpx;
			border-bottom: 1px solid #eeedf1;
			padding-bottom: 20rpx;
			.title{
				font-weight: bold;
			}
			.daizi{
				display: flex;
				justify-content: flex-end;
			}
			.daizi-one{
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				margin-left: 20rpx;
			}
		}
	}
	.popbox{
		background-color: #fff;
		padding: 10rpx 20rpx;
		display: flex;
		align-items: center;
		margin: 30rpx 0;
		input{
			border: 2rpx solid #DCDFE6;
			padding:6rpx 20rpx;
			border-radius: 8rpx;
		}
		.order-btn {
			display: inline-block;
			line-height: 2.3;
			font-size: 26rpx;
			padding: 0 30rpx;
			border-radius: 10rpx;
			background-color: #537bff;
			color:#fff;
			margin-left: 16rpx;
		}
	}
	.orderDetail{
		padding: 20rpx;
		padding-bottom: 0;
		font-size: 28rpx;
		.line{
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			margin-bottom: 20rpx;
			border-bottom: 1px solid #eeedf1;
			padding-bottom: 20rpx;
			.title{
				font-weight: bold;
			}
			.picker{
				display: flex;
				justify-content: flex-end;
				align-items: center;	
				flex-wrap: wrap;
				text{
					margin-right: 10rpx;
				}
				.tag-danger{
					width: 100%;
				}
			}
		}
	}
</style>
